<template>
  <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
    <van-tabbar-item name="/home" icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item name="/shop" icon="shop-o" to="/shop">商城</van-tabbar-item>
    <van-tabbar-item name="/about" icon="user-o" to="/about">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { Tabbar, TabbarItem } from "vant";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Tabbar",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    const { currentRoute } = useRouter();
    const active = ref("/home");

    onMounted(() => {
      currentRoute.value.path;
      if (currentRoute.value.path !== active.value) {
        active.value = currentRoute.value.path;
      }
    });
    return { active };
  },
});
</script>
